<!DOCTYPE html >
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
  <meta http-equiv="x-ua-compatible" content="IE=8">
  <title>Project CutList and Layout</title>
  <script type="text/javascript" src="wz_jsgraphics.js"></script>
  <link rel="stylesheet" href="result.css" TYPE="text/css" MEDIA="screen">
  <link rel="stylesheet" href="print.css" TYPE="text/css" MEDIA="print"> 
  <SCRIPT>

var results;

function handleResults(inResults){
  <!-- enable the print cutlist button, disable the print layout button  -->
  var buttonDivObject = document.getElementById('printLayout');
  buttonDivObject.style.visibility = "hidden";
  var buttonDivObject = document.getElementById('printCutlist');
  buttonDivObject.style.visibility = "visible";

  document.getElementById('resultDiv').innerHTML = inResults;
  var resultDivObject = document.getElementById('resultDiv');
  resultDivObject.style.visibility = "visible";
  resultDivObject.style.height = "500px";
  results = inResults;
  <!-- debug the generated script - print to another window -->
  <!-- debugWin(); -->
}

function debugWin(){ 
  debugWindow = window.open('','_blank'); 

  var guts =document.documentElement.innerHTML; 
  var match = "<"; 

  var re = new RegExp("<", "g"); 

  var newguts = guts.replace(re, "&lt;"); 

  debugWindow.document.write(newguts ); 
}

function debugSaveHtml() {
  var w = window.frames.w;
  if( !w )
  {
    w = document.createElement( 'iframe' );
    w.id = 'w';
    w.style.display = 'none';
    document.body.insertBefore( w, null );
    w = window.frames.w;
    if( !w )
    {
      w = window.open( '', '_temp', 'width=100,height=100' );
      if( !w )
      {
	window.alert( 'Sorry, the file could not be created.' );
      }
    }
  }
  
  var d = w.document;
  name = "testhtml.txt";
  d.open( 'text/plain', 'replace' );
  d.write( results );
  d.close();
  if( d.execCommand( 'SaveAs', null, name ) )
  {
    window.alert( name + ' has been saved.' );
  }
 w.close();
}

<!-- Take the javascript which was generated by the plugin as a series of high level calls to js_graphics methods  and insert it into -->
<!-- the cutlistresult.html and then proceed to execute the script. Note that inserting and executing a script like this causes -->
<!-- an issue for the default Mac browser used for Sketchup and prevents it from displaying. This is a known issue. The issue does -->
<!-- not happen for IE used on Windows machines running Sketchup. -->
<!-- As a result of running that script, the layout is painted in the window as a series of html methods. At the same time a running copy  of -->
<!-- the script is created and stored in a variable -->

function handleLayoutScript(inScript){
  <!-- Create a script DOM element with the inScript as the script text -->
  <!-- Place the script element into the head element-->
  var head = document.getElementsByTagName("head")[0];
  var scriptObj = document.createElement("script");

  <!-- both methods used below to set text attribute, as uncertain whether setAttribute method is supported in the browser-->
  scriptObj.type="text/javascript";
  scriptObj.text = inScript;
  head.appendChild(scriptObj);
    
  <!-- disable the print cutlist button, enable the print layout button  -->
  var buttonDivObject = document.getElementById('printLayout');
  buttonDivObject.style.visibility = "visible";
  var buttonDivObject = document.getElementById('printCutlist');
  buttonDivObject.style.visibility = "hidden";
  
  <!-- debug the inScript to verify the drawLayout() function has been defined -->
  <!--alert( inScript);-->
  <!-- alternate way of debugging the dynamic script - save it to the results variable and then call debugSaveHtml() which will print it-->
  results=scriptObj.text;
  <!-- debugSaveHtml(); -->

  
  <!-- Then call the drawLayout() function which the script in ScriptObj must have defined ( if it didn't then I'm sure there will be an error) -->
  <!-- This will draw in layoutDiv as a canvas because our scripts generated by Cutlist plugin( which is pass to the html code in inScript)  -->
  <!-- calls jsgraphics specifying to use this canvas -->
  
  drawLayout();
  
  <!-- For debug: now store the generated html from the jsgraphics script we just ran, to our results variable. This is the script which is used -->
  <!-- when the 'print layout' button is pressed-->
  <!-- ( jg_result_html is a variable inside the jsgraphcs script used to collect the html generated by jsgraphics for debugging)-->
  <!-- clear the variable first in case it was being used for debug above -->
  <!-- Note : js_graphics creates a div within this html document after it is run with class GraphicPrint, which is what is printed when --?
  <!-- the print button is pressed when window.print is called. so these variables are only for debug of what the resulting html would look like -->
  results = "";
  results = jg_result_html;
  
  <!-- debug - print the print script and html to a separate window -->
  <!-- debugWin(); -->
  
  <!-- debug - print the print html results to a file for inspection->
  <!-- debugSaveHtml(); -->
}
 
function handleClose(){
	window.location='skp:handleClose@x';
}

  </SCRIPT>
</head>
<body> 
<!-- The divs are both hidden and set visible by the appropriate input handler when needed. Style is controlled  through results.css-->
<div id='resultDiv' class='result'>
</div>
<div id='layoutDiv' class='layout'>
</div>
<div id="buttons">
<!--<table id="buttonsTable" width="200" border="0" cellspacing="0" cellpadding="2">-->
<table id="buttonsTable">
  <tr>
    <td><input id="printLayout" name="printLayout" type="button" value="Print Layout" onClick="javascript:window.print();"></td>
    <td><input id="printCutlist" name="printCutlist" type="button" value="Print Cutlist" onClick="javascript:window.print();"></td>
    <td><input id="close" name="close" type="button" value="Close" onClick="javascript:handleClose();"></td>
  </tr>
</table>
</div>
</body>
</html>
